{% extends "base.html" %}
{% block title %}Lawyer Directory — LegalEase AI{% endblock %}

{% block content %}
<div class="container">

    <div style="margin-bottom:1.5rem;">
        <a href="/lawyer/dashboard" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
    </div>

    <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;">
        <div>
            <h1 class="page-title"><i class="fas fa-users"></i> Lawyer Directory</h1>
            <p class="page-subtitle">{{ lawyers|length }} lawyers on the platform</p>
        </div>
        {% if total_notifications > 0 %}
        <div style="background:rgba(150,102,10,0.12);border:1px solid rgba(150,102,10,0.3);border-radius:12px;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;">
            <i class="fas fa-bell" style="color:var(--warning);font-size:1.1rem;"></i>
            <div>
                <div style="font-weight:700;color:var(--warning);font-size:0.95rem;">{{ total_notifications }} pending case notification{{ 's' if total_notifications != 1 else '' }}</div>
                <div style="font-size:0.75rem;color:var(--text-muted);">across {{ lawyers_with_notifications }} lawyer{{ 's' if lawyers_with_notifications != 1 else '' }}</div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Filters -->
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-body">
            <form method="GET" action="/lawyer/directory" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;">
                <div class="form-group" style="margin:0;flex:1;min-width:180px;">
                    <label class="form-label">Specialization</label>
                    <select name="specialization" class="form-control">
                        <option value="">All Specializations</option>
                        {% for cat in categories %}
                        <option value="{{ cat }}" {% if selected_spec == cat %}selected{% endif %}>{{ cat }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" style="margin:0;flex:1;min-width:160px;">
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-control" placeholder="e.g. Lahore" value="{{ selected_city }}">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
                        <input type="checkbox" name="notifications_only" value="1" {% if notifications_only %}checked{% endif %} style="width:16px;height:16px;accent-color:var(--accent);">
                        <span style="font-size:0.85rem;color:var(--text);">Only show lawyers with notifications</span>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Filter</button>
                <a href="/lawyer/directory" class="btn btn-outline">Clear</a>
            </form>
        </div>
    </div>

    {% if lawyers %}
    <div class="grid-2">
        {% for lawyer in lawyers %}
        <div class="lawyer-card" style="position:relative;
            {% if lawyer.pending_count > 0 %}border:1px solid rgba(150,102,10,0.4);background:rgba(150,102,10,0.04);
            {% elif lawyer.id == my_lawyer_id %}border:1px solid rgba(29,78,216,0.45);background:rgba(29,78,216,0.04);
            {% endif %}">

            <!-- Notification corner badge -->
            {% if lawyer.pending_count > 0 %}
            <div style="position:absolute;top:-10px;right:-10px;background:var(--warning);color:#1a1a1a;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;box-shadow:0 3px 10px rgba(150,102,10,0.4);border:2px solid #0a0e1a;">
                {{ lawyer.pending_count }}
            </div>
            {% endif %}

            <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;align-items:flex-start;">
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <div style="width:42px;height:42px;border-radius:50%;background:rgba(29,78,216,0.1);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);flex-shrink:0;">
                        {{ lawyer.name[0].upper() }}
                    </div>
                    <div>
                        <div class="lawyer-name">
                            {{ lawyer.name }}
                            {% if lawyer.id == my_lawyer_id %}
                            <span style="font-size:0.68rem;background:rgba(29,78,216,0.15);color:var(--accent);border:1px solid rgba(29,78,216,0.3);padding:0.1rem 0.5rem;border-radius:10px;margin-left:0.4rem;font-weight:600;">YOU</span>
                            {% endif %}
                        </div>
                        <div class="lawyer-firm">{{ lawyer.law_firm_name }}</div>
                    </div>
                </div>
                <span class="badge badge-primary">{{ lawyer.specialization }}</span>
            </div>

            <div class="lawyer-meta" style="margin-top:0.75rem;">
                <span><i class="fas fa-map-marker-alt"></i> {{ lawyer.city }}</span>
                <span><i class="fas fa-briefcase"></i> {{ lawyer.experience_years }} yrs exp</span>
                <span class="stars"><i class="fas fa-star"></i> {{ lawyer.rating }}</span>
                <span><i class="fas fa-chart-line"></i> {{ lawyer.success_rate_percentage }}% success</span>
            </div>

            <!-- Activity / Notification row -->
            <div style="display:flex;gap:0.6rem;margin-top:0.85rem;flex-wrap:wrap;align-items:center;">
                <span style="background:rgba(29,78,216,0.1);color:var(--accent);border:1px solid rgba(29,78,216,0.2);padding:0.25rem 0.7rem;border-radius:14px;font-size:0.78rem;font-weight:600;">
                    <i class="fas fa-calendar"></i> {{ lawyer.appointment_count }} total cases
                </span>
                {% if lawyer.pending_count > 0 %}
                <span style="background:rgba(150,102,10,0.15);color:var(--warning);border:1px solid rgba(150,102,10,0.35);padding:0.25rem 0.7rem;border-radius:14px;font-size:0.78rem;font-weight:700;animation:glow 2s infinite;">
                    <i class="fas fa-bell"></i> {{ lawyer.pending_count }} new client notification{{ 's' if lawyer.pending_count != 1 else '' }}
                </span>
                {% endif %}
            </div>

            <!-- Latest pending client preview -->
            {% if lawyer.latest_pending_client %}
            <div style="margin-top:0.6rem;font-size:0.78rem;color:var(--text-muted);background:#F4F6F9;border-radius:8px;padding:0.5rem 0.75rem;">
                <i class="fas fa-user-clock" style="color:var(--warning);"></i>
                Latest: <strong style="color:var(--text);">{{ lawyer.latest_pending_client }}</strong> requested an appointment
            </div>
            {% endif %}

            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:0.9rem;flex-wrap:wrap;gap:0.5rem;">
                <span style="font-weight:700;color:#0E7A43;font-size:1.02rem;">PKR {{ "{:,.0f}".format(lawyer.consultation_fee_pkr) }}</span>
                <div style="display:flex;gap:0.5rem;">
                    <a href="mailto:{{ lawyer.contact_email }}" class="btn btn-outline btn-sm"><i class="fas fa-envelope"></i></a>
                    {% if lawyer.id == my_lawyer_id %}
                        {% if lawyer.pending_count > 0 %}
                        <a href="/lawyer/dashboard#appointments-table" class="btn btn-primary btn-sm" style="background:rgba(150,102,10,0.18);color:var(--warning);border-color:rgba(150,102,10,0.4);">
                            <i class="fas fa-bell"></i> Open My Notifications
                        </a>
                        {% endif %}
                    {% else %}
                    <form method="POST" action="/lawyer/switch-profile" style="display:inline;">
                        <input type="hidden" name="lawyer_id" value="{{ lawyer.id }}">
                        <button type="submit" class="btn btn-primary btn-sm">
                            {% if lawyer.pending_count > 0 %}
                            <i class="fas fa-eye"></i> View Their Notifications
                            {% else %}
                            <i class="fas fa-exchange-alt"></i> Switch to This Profile
                            {% endif %}
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card"><div class="card-body" style="text-align:center;padding:3rem;color:var(--text-muted);">No lawyers found matching your filters.</div></div>
    {% endif %}

</div>
<style>
@keyframes glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(150,102,10,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(150,102,10,0); }
}
</style>
{% endblock %}